<template>
	<div id="headernav">
	<div>
		<div class="top-search">
			<span class="icon-info"></span>
			<span class="icon-aladeng"></span>
			<span class="search" @click="search()">
				<span class="icon-search"></span>
				<span class="word">输入商品关键词</span>
			</span>
		</div>
		<div class="navigation"  v-if="shownav">
			<a href="#/Recommended" @click="navClick(1)"><span :class="{'nav-light':light==1}">推荐</span></a>
			<a href="#/thiefwas" @click="navClick(2)"><span :class="{'nav-light':light==2}">贼惦记</span></a>
			<a href="#/food" @click="navClick(3)"><span :class="{'nav-light':light==3}">美食</span></a>
			<a href="#/Motherson" @click="navClick(4)"><span :class="{'nav-light':light==4}">母婴</span></a>
		</div>
	</div>
	</div>
</template>
<script>
	export default {
	  name: 'CindexHeader',
	  data:function(){
	  	return{
	  		light:1
	  	}
	  },
	  created:function(){
	  	switch (this.$route.path){
		    		case "/Recommended":{
		    			this.light=1;
		    			break;
		    		}
		    		case "/thiefwas":{
		    			this.light=2;
		    			break;
		    		}
		    		case "/food":{
		    			this.light=3;
		    			break;
		    		}
		    		case "/Motherson":{
		    			this.light=4;
		    			break;
		    		}
		    }
	  },
	  methods:{
	  	search:function(){
	  		this.$router.push({path:"/search"})
	  	},
	  	navClick:function(i){
	  		this.light=i;	  		
	  	}
	  },
	  props:["shownav"],
	  mounted:function(){
	  	if(!this.shownav){
	  		$("#headernav").css("height","9vh")
	  	}  	
	  }
	}
</script>
<style scoped="scoped">
	#headernav{
		width: 100%;
		height: 15vh;
	}
	#headernav>div{
		width: 100%;
		position: fixed;
		top:0;
		left:0;
		z-index:10;
	}
	.top-search{
		height: 5vh;
		background-color: #e53e42;
		padding: 2vh;
	}
	.icon-info{
		float: right;
		width: 4vh;
		height: 4vh;
		margin: 0.5vh;
		display: inline-block;
		background: url(../src/assets/C-index/个人信息.png) no-repeat;
		background-size: 100% 100%;
	}
	.icon-aladeng{
		width: 9vh;
		height: 3vh;
		margin-top: 1vh;
		display: inline-block;
		background: url(../src/assets/C-index/阿拉灯.png) no-repeat;
		background-size: 100% 100%;
	}
	.search{
		margin-left: 6%;
		margin-top: 1vh;
		background-color: white;
		width: 54vw;
		height: 3vh;
		display: inline-block;
		border-radius: 0.3rem;
		padding-top: 0.2rem;
		vertical-align: top;
	}
	.icon-search{
		width: 2.8vh;
		height: 2.8vh;
		display: inline-block;
		background: url(../src/assets/C-index/搜索.png) no-repeat;
		background-size: 100% 100%;
		margin-left: 2rem;
		vertical-align: top;
	}
	.search{
		color:red;
		font-size: 0;
	}
	.word{
		line-height: 2.8vh;
		font-size: 1.2rem;
		padding-left: 0.5rem;
	}
	.navigation{
		width: 100%;
		height: 6vh;
		font-size: 0;
		box-shadow: 0px 1px 7px rgba(0,0,0,0.15);
	}
	.navigation a{
		line-height: 5.5vh;
		font-size: 1.5rem;
		width: 21%;
		color:black;
		font-weight: 200;
		display: inline-block;
		padding: 0 2% 0 2%;
		text-align: center;
	}
	.navigation a span{
		display: inline-block;
	}
	span.nav-light{
		color: red;
		border-bottom: 0.5vh red solid;
	}
</style>